<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hexo online</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <style>
    .output {
      display: block;
      width: 100%;
      height: 80%;
      border: 10px solid #F8F8F8;
      padding: 10px;
      line-height: 20px;
      overflow: auto;
      background-color: #3F3F3F;
      color: #eee;
      font-size: 12px;
      font-family: Courier New;
    }

    #container {
      height: 100%;
      width: 100%;
    }

    .top {
      margin: 10px;
    }

    .btn-toolbar {
      margin-left: 5px;
      margin-bottom: 5px;
    }

    .list-group-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="sr-only">切换导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Hexo online</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="/hexo" pjax>Hexo</a></li>
          <li><a href="/post" pjax>Post</a></li>
          <li><a href="/page" pjax>Page</a></li>
          <li><a href="/logout">Logout</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div id="container">
    <%- include(path); %>
  </div>
  <script>
    if (location.pathname !== "/") {
      $("ul.nav li").removeClass("active");
      $('a[href="' + location.pathname + '"]').parent().addClass('active');
    }
    const ws = new WebSocket('<%- ssl?"wss":"ws" %>://' + window.location.hostname + ':<%= wsPort %>');
    ws.onopen = function (ev) {
      swal("WebSocket已连接");
    };
    ws.onmessage = function (ev) {
      var data = JSON.parse(ev.data);
      if (data.type === 'message') {
        swal("\n" + data.data);
      } else if (data.type === 'warning') {
        swal("\n" + data.data, 'warning');
      } else if (data.type === 'success') {
        swal("\n" + data.data, 'success');
      } else if (data.type === 'reload') {
        window.location.reload();
      } else if (data.type === 'error') {
        swal("\n执行出错，详情请查看控制台", "error");
        console.log(data.data);
      } else if (data.type === 'html') {
        $(data.el).html(data.data);
      }
    };
    ws.onclose = function (ev) {
      swal("\nWebSocket连接关闭");
    };
    ws.onerror = function (ev) {
      swal("\nWebSocket连接出错", "error");
      console.log(ev);
    };
    $("a[pjax]").bind("click", function (e) {
      if (window.autoSave) clearInterval(window.autoSave);
      $("ul.nav li").removeClass("active");
      $(this).parent().addClass('active');
      let path = $(this).attr("href");
      $.get($(this).attr("href"), {
        pjax: true
      }, function (data, status, xhr) {
        if (status === "success") {
          window.history.pushState({
            status: 0
          }, '', path)
          $("#container").html(data);
        }
      });
      return false;
    });

    function swal(e, type = 'message') {
      if ($(".output").length > 0) {
        $(".output")[0].value += e;
        $(".output").scrollTop($(".output")[0].scrollHeight);
      } else {
        switch (type) {
          case "success":
            alertify.success(e);
            break;
          case "error":
          case "warning":
            alertify.error(e);
            break;
          case "message":
            alertify.log(e);
            break;
          default:
            alertify.log(e);
            break;
        }
      }
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  <script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/alertify.js"></script>
</body>

</html>